import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Picker, Toast } from 'react-vant'
import { FeedbackQuery } from '../sevice/FeedService'
export default function FeedbackHistory() {

    const navigate = useNavigate();

    //form表单
    const [form] = Form.useForm()

    //清空表单
    const reset = () => {
        form.resetFields()
    }

    let [FeedbackList, setFeedbackList] = useState([])
    const onFinish = async (values) => {

        console.log(values);
        reset()

        let { data } = await FeedbackQuery({
            title: values.title
        })
        if (data.code == 200) {
            setFeedbackList(data.rows)
        }

        console.log(data.rows);


    }




    return (
        <div>
            <NavBar onBack={() => { navigate("/Lifepay") }}>反馈记录查询</NavBar>



            <Form
                style={{ padding: 20 }}
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='primary' block>
                            提交
                        </Button>
                    </div>
                }>





                <Form.Item
                    rules={[{ required: true, message: '请选择需要查询的记录' }]}
                    isLink
                    name='title'
                    label='反馈类型'
                    trigger='onConfirm'
                    onClick={(_, action) => {
                        action.current?.open()
                    }}
                >
                    <Picker
                        popup
                        columns={[
                            '缴费问题',
                            '活动问题',
                            '体验不佳',
                            "其他"]}>
                        {val => val || '请选择反馈类型'}
                    </Picker>
                </Form.Item>
            </Form>



            <>
                {FeedbackList.map(item => {
                    return <div key={item.id} style={{ border: '1px solid grey', margin: 10 }}>
                        <div style={{ padding: 10 }}>

                            问题类型：<span style={{ marginLeft: 10 }}><span style={{ fontSize: 20,color:'red'}}>{item.title} </span>

                            </span>

                            <div style={{ marginTop: 5 ,fontSize:15, color: 'green' }}>反馈内容 ：{item.content}</div>
                            <div style={{ marginTop: 5 }}>发布时间：{item.createTime}</div>

                        </div>
                    </div>

                })
                }

            </>





        </div>
    )
}
